import React from 'react';
import { Form, Input, Radio, Switch } from 'antd';
import RoleSelect from '@/components/RoleSelect';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';

const Content = React.forwardRef((props, ref) => {
  return (
    <Form
      ref={ref}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ sex: 1, status: true }}
      layout="horizontal">
      <Form.Item
        name='name'
        label='管理员名称：'
        rules={[{ required: true, message: '管理员名称不能为空' }]}>
        <Input placeholder='请输入管理员名称' />
      </Form.Item>
      <Form.Item
        name='loginInput'
        label='登陆账号：'
        rules={[{ required: true, message: '登陆账号不能为空' }]}>
        <Input placeholder='请输入登陆账号' autoComplete='off' />
      </Form.Item>
      <Form.Item
        name="password"
        label="登陆密码："
        rules={[{ required: true, message: '登陆密码不能为空' }]}>
        <Input.Password
          allowClear
          placeholder='请输入登陆密码'
          iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} />
      </Form.Item>
      <Form.Item
        name="confromPassword"
        label="确认密码："
        rules={[{ required: true, message: '确认密码不能为空' }]}>
        <Input.Password
          allowClear
          placeholder='请输入确认密码'
          iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} />
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色："
        rules={[{ required: true, message: '角色不能为空' }]}>
        <RoleSelect />
      </Form.Item>
      <Form.Item
        name="sex"
        label='性别：'
        rules={[{ required: true }]}>
        <Radio.Group>
          <Radio value={1}>男</Radio>
          <Radio value={2}>女</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        name='email'
        label='电子邮箱：'
        rules={[
          { required: true, message: '电子邮箱不能为空' },
          { type:'email', message: '邮箱格式不正确', validateTrigger: ['blur'] }
        ]}>
        <Input allowClear placeholder='请输入电子邮箱' />
      </Form.Item>
      <Form.Item
        name='status'
        label='状态：'
        valuePropName="checked"
        style={{ marginBottom: 24 }}>
        <Switch checkedChildren="开启" unCheckedChildren="关闭" />
      </Form.Item>
    </Form>
  )
})

export default Content